<template>
  <div class="car-count">
    <z-title name="各车辆收运情况"></z-title>
    <z-chart :option="option" class="chart"></z-chart>
    <div class="toolbar">
      <el-select filterable clearable v-model="carIdList" multiple collapse-tags placeholder="请选择车辆" style="width: 260px;" @change="getDataList">
        <el-option v-for="car in carList" :key="car.id" :label="car.numberPlate" :value="car.id"></el-option>
      </el-select>
      <el-date-picker size="small" v-model="daterange" style="width: 250px;" align="center" :clearable="false" @change="getDataList"
        type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
import { formatDate } from '@/utils/timeUtils.js'
export default {
  props: {
    carList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    const now = new Date()
    const pre = new Date(now.getTime() - 3600000 * 24 * 7)
    return {
      carIdList: [],
      daterange: [pre, now],
      dataList: [],
      option: {}
    }
  },
  mounted () {
    // await this.getCarList()
    this.getDataList()
  },
  methods: {
    getCarList() {
      return new Promise(resolve => {
        this.$http({
          url: this.$http.adornUrl('/sign/signcar/list'),
          method: 'post',
          data: this.$http.adornData({
            page: 1,
            limit: -1
          })
        }).then(({ data }) => {
          const carMap = {}
          if (data && data.code === 0) {
            this.carList = data.page.list
            this.carList.forEach(element => {
              carMap[element.id + ''] = element.numberPlate
            });
          } else {
            this.carList = []
          }
          this.carMap = carMap
          resolve()
        })
      })
    },
    getDataList() {
      this.$http({
        url: this.$http.adornUrl('/sign/signtask/weightTotalGroupByCar'),
        method: 'post',
        data: this.$http.adornData({
          carIdList: this.carIdList,
          startTime: formatDate(this.daterange[0], 'yyyy-MM-dd 00:00:00'),
          endTime: formatDate(this.daterange[1], 'yyyy-MM-dd 23:59:59'),
          order: '2'
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.list
          this.setOption()
        }
      })
    },
    setOption () {
      const props = [
        { value: 'syWeight', name: '收运量(m³)', unit: '吨', data: [], type: 'bar', color: '#00A0E9', yAxisIndex: 0 },
        { value: 'taskCount', name: '收运次数(次)', unit: '次', data: [], type: 'line', color: '#F9AC65', yAxisIndex: 1 },
        { value: 'lostTime', name: '耗时(秒)', unit: '秒', data: [], type: 'line', color: '#22DB8F', yAxisIndex: 2 }
      ]
      const legendData = props.map(e => e.name)
      
      const xAxisData = []

      this.dataList.forEach(e => {
        xAxisData.push(e.numberPlate)
        props.forEach(f => {
          f.data.push(e[f.value])
        })
      })

      const series = props.map(f => {
        const serie = {
          name: f.name,
          type: f.type,
          data: f.data,
          itemStyle: { color: f.color },
          yAxisIndex: f.yAxisIndex
        }
        if (f.type === 'bar') {
          serie.barWidth = '18%'
          serie.itemStyle.barBorderRadius = [4, 4, 0, 0]
        } else if (f.type === 'line') {
          serie.smooth = true
        }
        return serie
      })

      this.option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: { color: '#999' }
          }
        },
        toolbox: {
          feature: {
            // dataView: { show: true, readOnly: false },
            // magicType: { show: true, type: ['line', 'bar'] },
            // restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: { data: legendData, show: true },
        grid: { left: 20, right: 70, bottom: 30, containLabel: true },
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisPointer: { type: 'shadow' },
            axisLabel: {  
              // interval: 0,  
              formatter: function (value) { 
                let len = value.length
                let length = 4 //控制一行显示个数
                let num = Math.ceil(len/length);//循环次数
                if (num > 1) {
                  let str = ''
                  for (let i = 0; i < num; i++) {
                    str += value.substring(i*length,(i+1)*length) + '\n'
                  }
                  return str
                } else {
                  return value
                }
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '吨',
            min: 0,
            axisTick: { show: true },
            axisLine: { show: true, lineStyle: { color: '#666' } }
          },
          {
            type: 'value',
            name: '次',
            min: 0,
            position: 'right',
            offset: 0,
            axisTick: { show: true },
            axisLine: { show: true, lineStyle: { color: '#666' } }
          },
          {
            type: 'value',
            name: '秒',
            min: 0,
            position: 'right',
            offset: 60,
            axisTick: { show: true },
            axisLine: { show: true, lineStyle: { color: '#666' } }
          }
        ],
        series: series,
        dataZoom: [
          {
            show: true,
            height: 15,
            xAxisIndex: [0],
            bottom: '2%',
            start: 0,
            end: xAxisData.length > 20 ? (20 / xAxisData.length * 100) : 100,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '100%',
            handleStyle: {
              color: '#d3dee5',
            },
            borderColor: '#90979c'
          }, {
            type: 'inside',
            show: true,
            height: 15,
            start: 1,
            end: 35
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.car-count {
  background: #fff;
  padding: 16px 12px;
  border-radius: 5px;
  position: relative;
  .toolbar {
    position: absolute;
    top: 12px;
    right: 12px;
  }
  .chart {
    margin-top: 28px;
    width: 100%;
    height: 320px;
  }
}
</style>